<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="../css/page/user.css" />
    <style>
        .newbtn { border: 1px solid red;  margin: 2rem ;}
    </style>
</head>

<body>
    <div class="page"  @vue:mounted="mounted">
        <div class="newbtn" @click="funcinit"> func init </div>
        <template id="counter-template">
            My count is {{ count }}
            <button @click="inc">++</button>
        </template>
        <div v-scope="Counter({ initialCount: 1 })"></div>
        <div v-scope="Button2(data.bt2)"></div>

        <div v-scope="{ localCount: 0 }">
            <p>Global {{ store.count }}</p>
            <button @click="store.inc">increment</button>
        
            <p>Local {{ localCount }}</p>
            <button @click="localCount++">increment</button>
        </div>
  

    </div>
</body>
<script src="../script/api.js"></script>
<script src="../script/common.js"></script>

<script  type="module">
    import { createApp , reactive} from 'https://le.6gcc.com/app/web/script/pvue.js';

    function Counter(props) {
    return {
      $template: '#counter-template',
      count: props.initialCount,
      inc() {
        this.count++
      }
    }
  }



  function Button2(props) {
    let $template = `
    <div>
        <button @click="testfunc1">${props.txt1}</button>
        <button  @click="testfunc2">${props.txt2}</button>
        </div>`;
    return {
    
      $template,
      txt1 : props.txt1,
      testfunc1() {
        props.func1();
      }, 
      testfunc2() {
       alert(222222222);
      }
    }
  }

  const store = reactive({
    count: 0,
    inc() {
      this.count++
    }
  })

  // manipulate it here
  store.inc()

    const APP = ()=>{
        createApp({
        Counter,
        Button2,
        store,
        data:  { 
          bt2:{ txt1:'确定' ,txt2:'取消' ,func1: ()=>{ alert("func1 "); } },
        
        },
        
        
        funcinit(){
            console.log(" func init ");
            this.data.bt2.func1 = ()=>{
            alert("func1 2222 ");
            }
            this.data.bt2.txt1 ="1111111111111111";
          

        },
        mounted() {
            console.log("mounted");
            window.app = this ;
           

        }
        }).mount()
    }

    window.apiready = ()=> {
        console.log("ready");
        APP();
    }

    window.apiready ();
</script>


</html>